<template>
  <el-row style="margin-top:20px;position:relative;">
    <el-col :span="3">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="18">
      <el-row style="margin-top:10px">
        <el-col :span="16" style="background-color:white">
          <div class="live_top" style="padding: 20px">
            <div style="float:left;">
              <span style="font-size: 16px;font-weight: 500;color: #414a60;">
                {{live.liveTitle}}
              </span>
              <div style="font-size: 13px;color: #414a60;line-height: 20px; margin-top: 8px">
                开始时间：<span>{{ live.beginTime }}</span>
              </div>
            </div>
            <el-tag style="float:right">{{ tag }}</el-tag>
          </div>
          <div id="live" >
          </div>
          <div style="padding:20px">
                <el-descriptions :column="2" title="直播介绍">
                  <el-descriptions-item label="宣讲人">{{ live.speaker }}</el-descriptions-item>
                  <el-descriptions-item label="宣讲单位">{{ live.institutions }}</el-descriptions-item>
                  <el-descriptions-item label="宣讲内容">
                    {{live.liveIntroduce}}
                  </el-descriptions-item>
                </el-descriptions>
            </div>
        </el-col>
        <el-col :span="8">
          <div class="hot_article">
            <div class="choice">
              <span style="font-size:18px;color: #606266;">讨论区</span>
              <el-divider direction="horizontal"></el-divider>
              <div class="dis" style="height:380px;overflow:auto;padding-bottom:20px">
                <div class="dis_item">
                  <span  style="font-size:13px;color: #8d92a1;">唐朝阳：</span>
                  <span style="font-size:13px;color:#414a60">
                    请问是暑期开始实习吗？
                    请问是暑期开始实习吗？
                  </span>
                </div>
              </div>
              <div style="height:200px;">
                <el-input type="textarea" maxlength="30" show-word-limit>
                </el-input>
                <div style="margin-top:10px;float:right">
                  <el-button type="primary">发送</el-button>
                </div>

              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="3">
      <div class="grid-content bg-purple">
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {getLive} from "@/network/recruit";

export default {
  name: "PreachLiveDetail",
  data(){
    return{
      liveId:'',
      live:'',
      tag:'',
    }
  },
  mounted() {
    if(this.$route.params.liveId!=undefined){
      sessionStorage.setItem("liveId",this.$route.params.liveId);
    }
    this.liveId = sessionStorage.getItem("liveId")
    this.liveShow();
  },
  methods:{
    liveShow(){
      getLive(this.liveId).then(res=>{
        if(res!=undefined){
          this.live = res.data.data;
          if(Date.parse(this.live.endTime)<new Date().getTime()){
            this.tag="已结束";
          }else if(Date.parse(this.live.beginTime)>new Date().getTime()){
            this.tag="未开始";
          }
        }
      })
    },
  }

}
</script>

<style scoped>
.grid-content {
  min-height: 50px;
  color: white;
  font-size: 14px;
}

.hot_article {
  width: 97.5%;
  height: 460px;
  background-color: white;
  margin-left: 10px;
}

.choice {
  padding: 10px 20px 0 20px;
  background-color:white;
}

/deep/ .el-divider--horizontal{
  margin:19px 0;
}
#live{
  height:440px;width:100%;background-color:black;clear:both;margin-top:40px
}
/deep/ .el-textarea__inner{
  resize:none;
  height:110px;
 background-color: #f3f5fa;
}
</style>